<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>尺寸显示轮廓</title>
		<style type="text/css">
			
			#div1{
				width: 300px;
				height: 200px;
				background-color: skyblue;
				display: inline-block;
				/*block 块元素 ，有高度和宽度*/
			}
			
			#div2{
				width: 300px;
				height: 200px;
				background-color: #9ACD32;
				display: inline-block;
			}
			#span1{
				background-color:#DEB887;
				width: 100px;
				height: 100px;
				display: inline;
				/*inline 行元素 ，没有高度和宽度
				  inline-block 行块标签 ，既有高度和宽度，也可以在一行
				 */
			}
			
			#div3{
				width: 100px;
				height: 100px;
				background-color: grey;
				/*outline: 20px solid red;*/
				/*border: 30px solid blue;*/
			}
			
			input{
				outline: none;
			}
		</style>
	</head>
	<body>
		<h2>尺寸 width  height</h2>
		<h2>显示 display</h2>
		<h2>轮廓 outline</h2>
		<div id="div1">
			div1
		</div><div id="div2">
			div2
		</div><span id="span1">
			商品
		</span>
		<span id="span2">
			xxx
		</span>
		<span id="span3">
			yyyy
		</span>
		
		<div id="div3">
			
		</div>
		
		<form>
			<input type="text" name="username" />
		</form>
	</body>
</html>
